<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios0.18.js"></script>
</head>
<body>
<div id="app" style="width: 100%">
    <table>
        <tr>
            <th>用户名</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in userList">
            <td>{{item.userUsername}}</td>
            <td v-if="item.userState == 1">正常</td>
            <td v-if="item.userState == 0">封禁</td>
            <td v-if="item.userState == 0"><input type="button" value="解封" @click="changeUser(item.userId,1)">
            </td>
            <td v-if="item.userState == 1"><input type="button" value="封禁" @click="changeUser(item.userId,0)">
            </td>

        </tr>
    </table>
</div>
</body>
</html>
<script>
    new Vue({
        el: "#app",
        data: {
            userList: []
        },
        methods: {
            getUserList() {
                let _this = this;
                axios.post("http://localhost:8080/ssm/admin/userList")
                    .then(function (resp) {
                        console.log(resp.data);
                        if (resp.data.code === 200) {
                            _this.userList = resp.data.data;
                        } else {
                            alert(resp.data.msg);
                        }
                    });
            },
            changeUser(mid, state) {
                let _this = this;
                axios.post("http://localhost:8080/ssm/admin/changeUserState",
                    "userId=" + mid + "&state=" + state).then((resp) => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        _this.getUserList();
                    } else {
                        alert(resp.data.msg);
                    }
                });
            }
        },
        mounted() {
            this.getUserList();
        }
    })
</script>


